﻿
<h3>菜单</h3>
<script src="~/js/vue.min.js"></script>
<script src="~/js/axios.min.js"></script>
<script src="~/js/qs.min.js"></script>
<script src="~/js/moment.js"></script>

@{
    ViewData["Title"] = "GetDishInfo";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@using Model
@model List<DishesInfo>
<style type="text/css">
    tr.change:hover {
        background-color: #00FF00
    }
</style>
<div id="vue-menu">
    <input style="margin-left:158px;" type="text" v-model="queryModel.name" />
    <input type="button" value="查询" v-on:click="queryDish" />
    <input type="button" value="新增菜品" onclick="jmp()"/>
    <table id="tm" class="table table-bordered" style="width:800px;margin: auto;text-align: center;">
        <tr class="change" style="background-color:cadetblue">
            <td>菜品名称</td>
            <td>菜品价格</td>
            <td>菜品类型</td>
            <td>菜品图片</td>
            <td>点菜</td>
        </tr>

        <tr v-for="value in dishInfo">
            <td>{{value.dishName}}</td>
            <td>{{value.dishPrice}}<span>元</span></td>
            <td>{{value.dishLei==1?"热菜":value.dishLei==2?"凉菜":value.dishLei==3?"汤":""}}</td>
            <td><img :src="value.dishPicture" style="width:80px;height:80px" /></td>
            <td><input type="button" v-on:click="deldish(value.dishiId)" value="删除" /></td>
        </tr>


    </table>
</div>
<script>
    new Vue({
        el: '#vue-menu',
        data() {
            return {
                dishInfo: [],
                queryModel: {
                    name: "",
                },
                id: 0
            }

        },
        mounted: function () {
            axios
                .get("/Dishs/GetInfo")
                .then(res => (this.dishInfo = res.data))
                .catch(function (error) {
                    console.log(error)
                });
        },
        methods: {
            
            queryDish: function () {
                axios
                    .get("/Dishs/GetInfo", {
                        params: this.queryModel
                    })
                    .then(res => (this.dishInfo = res.data));
            },
            deldish: function (dishiId) {
                this.id = dishiId;
          
                axios
                    .get("/Dishs/DelDish", {
                        params: {

                            id: this.id
                        }

                    })
                    .then(function (i) {
                        if (i.data > 0) {
                            alert("删除成功!");
                            location.href = '/dishs/GetDishInfo'
                        }
                        else {
                            alert("删除失败");
                        }
                    })

            }
          },

       
        })
    

    function jmp() {
        location.href = '/dishs/AddDishInfo'
    }

</script>
